import React from 'react';
import type { IPanelNode } from './interface';
import { IGraphCommandService, IGraphConfig, IModelService, XFlowConstants } from '@antv/xflow-core'


interface INodeRenderOptions {
  graphConfig: IGraphConfig
  nodeConfig: IPanelNode
  modelService: IModelService
  commandService: IGraphCommandService
  onMouseDown: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
}

const PanelNode = (props: INodeRenderOptions) => {
  const { nodeConfig, onMouseDown, graphConfig, modelService, commandService } = props

  if (!graphConfig) {
    return <div />
  }

  if (nodeConfig.renderComponent) {
    return (
      <div onMouseDown={onMouseDown}>
        {React.createElement(nodeConfig.renderComponent, {
          data: nodeConfig,
          isNodePanel: true,
        })}
      </div>
    )
  }
  const renderKey = graphConfig.nodeTypeParser(nodeConfig) || XFlowConstants.XFLOW_DEFAULT_NODE
  const reactComponent = graphConfig.nodeRender.get(renderKey)

  return (
    <div onMouseDown={onMouseDown}>
      {reactComponent && React.createElement(reactComponent, {
        commandService,
        modelService,
        data: nodeConfig,
        isNodeTreePanel: true,
      })}
    </div>
  )
}
export default PanelNode